<template>
  <list-layout
    class="login-layout"
    :hideCrumbs="true"
    channel="feedback">
    <div class="column items-center">
      <gradient-text class="q-my-md" style="margin-top: 38px;">{{$t('咨询留言')}}</gradient-text>
      <q-form
        ref="form"
        class="feedback-form full-width"
        @submit="submit"
        @reset="reset">
        <div class="row no-wrap">
          <div class="required-mark">*</div>
          <div class="input-label">{{$t('姓名')}}</div>
          <div class="colon">:</div>
        </div>
        <q-input
          class="input input-name"
          :placeholder="$t('请输入真实姓名')"
          outlined dense v-model="feedback.姓名"
          :hide-bottom-space="true"
          :rules="[val => !!val || '']">
        </q-input>
        <div class="row no-wrap">
          <div class="input-label">{{$t('工作单位')}}</div>
          <div class="colon">:</div>
        </div>
        <q-input
          class="input input-company"
          :placeholder="$t('请输入工作单位')"
          outlined dense v-model="feedback.单位"
          :hide-bottom-space="true">
        </q-input>
        <div class="row no-wrap">
          <div class="required-mark">*</div>
          <div class="input-label">{{$t('联系方式')}}</div>
          <div class="colon">:</div>
        </div>
        <q-input
          class="input input-contact"
          :placeholder="$t('请输入手机号或邮箱')"
          outlined dense v-model="feedback.联系方式"
          :hide-bottom-space="true"
          :rules="[val => !!val || '']">
        </q-input>
        <div class="row no-wrap">
          <div class="required-mark">*</div>
          <div class="input-label">{{$t('咨询内容')}}</div>
          <div class="colon">:</div>
        </div>
        <q-input
          class="input input-content"
          :placeholder="$t('请输入咨询内容')"
          outlined dense
          v-model="feedback.内容" type="textarea"
          :hide-bottom-space="true"
          :rules="[val => !!val || '']">
        </q-input>

        <div class="row no-wrap">
          <div class="required-mark">*</div>
          <div class="input-label">{{$t('验证码')}}</div>
          <div class="colon">:</div>
        </div>
        <q-input
          class="input input-captcha"
          :placeholder="$t('图形验证码')"
          outlined dense v-model="feedback.captcha.captcha"
          :hide-bottom-space="true"
          :rules="[val => !!val || '']">
          <template v-slot:after>
            <captcha ref="captcha" class="captcha" @change="changeCaptcha"></captcha>
          </template>
        </q-input>

        <div class="submit-buttons row full-width justify-center">
          <q-btn flat type="reset" class="reset q-px-lg text-white"
            :label="$t('重置')"></q-btn>
          <q-btn flat type="commit"
            class="submit q-px-lg q-ml-xl bg-primary text-white" :label="$t('提交')"></q-btn>
        </div>
      </q-form>
    </div>
  </list-layout>
</template>

<script>
import mixins from 'eis-admin-mixins';
import listLayout from '../../components/listLayout.vue';
import gradientText from '../../components/gradientText.vue';
import captcha from '../../components/captcha.vue';

export default {
  name: 'FeedbackPage',
  mixins: [mixins.ObjectDataMixin],
  components: {
    listLayout,
    gradientText,
    captcha,
  },
  data() {
    return {
      feedback: {
        姓名: '',
        单位: '',
        联系方式: '',
        内容: '',
        code: '',
        captcha: {
          captcha: '',
          id: '',
        },
      },
    };
  },
  methods: {
    changeCaptcha(cid) {
      this.feedback.captcha.id = cid;
    },
    submit() {
      // 也可用dialog，或提示后跳转到首页？？
      this.postRequest('/portal/feedback', this.feedback).then((d) => {
        if (d && d.msg === 'OK') {
          this.$q.notify(this.$t('提交成功'));
          this.$refs.form.reset();
        } else {
          // this.$q.notify(this.$t('提交失败'));
        }
      });

      this.$refs.captcha.refresh();
    },
    reset() {
      this.feedback = {
        姓名: '',
        单位: '',
        联系方式: '',
        内容: '',
        code: '',
        captcha: {
          captcha: '',
          id: '',
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.feedback-form {
  width: 624px;
  max-width: 624px;
  margin-top: 30px;
  margin-bottom: 60px;

  .input {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .input-label {
    // width: 70px;
    font-size: 16px;
    color: #666666;
    text-align: justify;
    text-align-last: justify;
    text-justify: distribute-all-lines;
  }

  .required-mark {
    color: #bb1e32;
    font-size: 16px;
    width: 10px;
  }
  .colon {
    font-size: 16px;
    margin-right: 18px;
  }

  .verification-code {
    width: 300px;
  }

  .submit-buttons {
    margin-top: 60px;

    .reset {
      background-color: #9ba9b5;
      // margin-right: 40px;
    }
  }

  .input-captcha {
    width: 320px;
  }
}
</style>
